<template>
  <el-card>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-input
          v-model.trim="formParams.input"
          placeholder="请输入站点名称/ID"
        >
          <template #append>
            <el-select v-model="select" style="width: 115px">
              <el-option label="按名称查询" value="name" />
              <el-option label="按ID查询" value="id" />
            </el-select>
          </template>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-select v-model="formParams.value" placeholder="充电站状态">
          <el-option label="全部" :value="1" />
          <el-option label="使用中" :value="2" />
          <el-option label="空闲中" :value="3" />
          <el-option label="维护中" :value="4" />
          <el-option label="待维修" :value="5" />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="getData">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>
    </el-row>
  </el-card>
  <el-card class="mt">
    <el-row>
      <el-col :span="6">
        <el-statistic title="累计充电量(度)" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="累计充电次数(次)" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="服务区域(个)" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="累计效益(元)" :value="268500" />
      </el-col>
    </el-row>
  </el-card>
  <el-card class="mt">
    <el-button icon="Plus" type="primary" @click="addStation"
      v-permission="'admin'"
      >新增充电站</el-button
    >
  </el-card>
  <el-card class="mt">
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column type="index" label="序号" width="70" align="center" />
      <el-table-column
        prop="name"
        label="站点名称"
        width="150"
        align="center"
      />
      <el-table-column prop="id" label="站点ID" align="center" width="120" />
      <el-table-column prop="city" label="所属城市" align="center" />
      <el-table-column prop="fast" label="快充数" align="center" />
      <el-table-column prop="slow" label="慢充数" align="center" />
      <el-table-column prop="status" label="站点状态" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 2" type="primary">使用中</el-tag>
          <el-tag v-if="scope.row.status === 3" type="success">空闲中</el-tag>
          <el-tag v-if="scope.row.status === 4" type="warning">维护中</el-tag>
          <el-tag v-if="scope.row.status === 5" type="danger">待维修</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="now" label="正在充电" align="center" />
      <el-table-column prop="fault" label="故障数" width="80" align="center" />
      <el-table-column prop="person" label="站点负责人" align="center" />
      <el-table-column
        prop="tel"
        label="负责人电话"
        width="150"
        align="center"
      />
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确认删除当前站点吗?"
            @confirm="handlerDelete(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt mb fr"
      background
      v-model:current-page="pageInfo.page"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <StationForm ref="stationFormRef" :openType="openType" @reload="getData" />
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { listApi, deleteApi } from '@/api/chargingStation';
import StationForm from './components/StationForm.vue';
import type { RowType } from '@/types/station';
import { useStationStore } from '@/store/station';
import { ElMessage } from 'element-plus';

const stationStore = useStationStore();
const select = ref('name');
const stationFormRef = ref<{ open: () => void } | null>(null);
const formParams = reactive({
  input: '',
  value: 1,
});
const pageInfo = reactive({
  page: 1,
  pageSize: 10,
});
const totals = ref<number>(0);
const tableData = ref<RowType[]>([]);
const loading = ref<boolean>(false);
const openType = ref<'add' | 'edit'>('add');
const getData = async () => {
  console.log('👿 重新加载数据');
  loading.value = true;
  const {
    data: { list, total },
  } = await listApi({
    ...pageInfo,
    status: formParams.value,
    [select.value]: formParams.input,
  });
  loading.value = false;
  tableData.value = list;
  totals.value = total;
};
const handleSizeChange = (size: number) => {
  pageInfo.pageSize = size;
  getData();
};

const handleCurrentChange = (page: number) => {
  pageInfo.page = page;
  getData();
};

const handleReset = () => {
  pageInfo.page = 1;
  pageInfo.pageSize = 10;
  formParams.input = '';
  formParams.value = 1;
  select.value = 'name';
  getData();
};

const addStation = () => {
  if (stationFormRef.value) {
    stationFormRef.value.open();
    openType.value = 'add';
    stationStore.setRowData({
      name: '',
      id: '',
      city: '',
      fast: '',
      slow: '',
      status: 1,
      now: '',
      fault: '',
      person: '',
      tel: '',
    });
  }
};

const edit = (row: RowType) => {
  // console.log("👿 ~ edit ~ row:", row)

  if (stationFormRef.value) {
    stationFormRef.value.open();
    openType.value = 'edit';
    stationStore.setRowData(row);
  }
};

const handlerDelete = async (id: string) => {
  const res = await deleteApi(id);
  if(res.code===200){
    ElMessage.success('删除成功');
    getData();
  }
};
onMounted(() => {
  getData();
});
</script>
<style scoped lang="less"></style>
